<template>
	<div class="nav">
		<TaskContainer>
			<!-- 定义一个插槽、用来分发搜索框 -->
			<div class="search">
				<slot name="search" :condition="modelValue"></slot>
			</div>
			
			<ConditionItemVue v-for="item in conditionList" 
				v-bind="item" @change-condition="handler" 
				:key="item.name" v-model="modelValue[item.value]"/>
			
			<div class="toolbar">
				<!-- 定义一个插槽、用来设置 按钮 -->
				<slot name="toolbar"></slot>
			</div>	
		</TaskContainer>
	</div>
</template>

<script>
import TaskContainer from './TaskContainer.vue' ;
import ConditionItemVue from './ConditionItem.vue';

export default {
	props: {
		conditionList: {
			type: Array, 
			required: true,
		},
		modelValue: {
			type: Object, 
			required: true ,
		}
	},
	components: {
		TaskContainer,
		ConditionItemVue ,
	},
	methods: {
		handler() {
			this.$emit('update:modelValue', this.modelValue) ;
		}
	}
}
</script>

<style scoped>
	
.nav {
	position: relative;
	background-color: #f5faff;
	padding: 20px 0;
	min-width: var(--max-width);
	margin-bottom: 30px;
}

.search {
	width: 80%;
	margin: 0 auto;
}

.toolbar {
	position: absolute;
	right: 10px;
	bottom: -40px;
	z-index: 200;
}
</style>